<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <div class="header-editor" v-if="module" v-cloak>
        <el-tabs :stretch="true" v-model="activeTab">
            <el-tab-pane label="基础" name="base">
                <el-form label-width="100px" size="small">
                    <el-form-item label="提示文字">
                        <el-input style="width: 250px" v-model="module.data.text.value" placeholder="请输入"></el-input>
                    </el-form-item>

                    <el-form-item label="地图找房">
                        <el-radio-group v-model="module.data.showMap">
                            <el-radio :label="true">显示</el-radio>
                            <el-radio :label="false">隐藏</el-radio>
                        </el-radio-group>
                    </el-form-item>

                    <el-form-item label="跳转路径">
                        <el-select v-model="module.data.path" placeholder="请选择">
                            <el-option v-for="item in pathItems" :key="item.value" :label="item.name" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="搜索图标">
                        <image-picker width="24" height="24" v-model="module.data.searchIcon" />
                    </el-form-item>

                    <el-form-item label="地图找房图标">
                        <image-picker width="24" height="24" v-model="module.data.mapIcon" />
                    </el-form-item>

                </el-form>
            </el-tab-pane>

            <el-tab-pane label="样式" name="style">

                <el-form-item label="风格">
                    <ul class="style-items">
                        <li @click="styleChangeHandle(item.value)"
                            :class="{ 'style-item': true, active: module.data.styleName == item.value, }"
                            v-for="(item,i) in styleItems" :key="i">
                            <el-image
                                :src="require('@/assets/images/pagemaker/searchbar-style/' + item.name + '.png')"></el-image>
                        </li>
                    </ul>
                </el-form-item>



                <el-form-item label="提示文字颜色">
                    <el-color-picker v-model="module.data.text.color" :predefine="predefineColors"></el-color-picker>
                </el-form-item>

                <el-form-item label="边框颜色">
                    <el-color-picker v-model="module.data.borderColor"></el-color-picker>
                </el-form-item>

                <el-form-item label="输入框背景色">
                    <el-color-picker show-alpha v-model="module.data.inputColor"></el-color-picker>
                </el-form-item>
                <module-style-editor :module="module"></module-style-editor>
            </el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
import FontEditor from "./base/FontEditor";
import LinkEditor from "@/components/LinkEditor";
import ModuleStyleEditor from "./ModuleStyleEditor/Index";
import VueInputTag from "vue-input-tag";
import ImagePicker from "@/components/ImagePicker";

export default {
    components: {
        FontEditor,
        LinkEditor,
        ModuleStyleEditor,
        VueInputTag,
        ImagePicker,
    },
    data () {
        return {
            predefineColors: ["#f9f9f9", "#f4f4f4", "#cecece"],
            activeTab: "base",
            loading: false,
            tagValue: "",
            // 标题的样式
            styleItems: [
                { name: "1", value: 'normal' },
                { name: "2", value: 'round' },
            ],
            pathItems: [
                { name: "厂房搜索页", value: "/pkgSearch/page/search/index" },
                {name: "视频搜索页", value: "/pkgVideo/pages/video/index" },
                {name: "土拍搜索页", value: "/pkgTupai/pages/tupai/index" },
                {name: "资讯搜索页", value: "/pkgNews/pages/news/index" },
            ]
        };
    },

    watch: {},

    computed: {
        module: function () {
            return this.$store.state.pagemaker.currentModule;
        },
    },
    methods: {
        styleChangeHandle: function (val) {
            this.$set(this.module.data, "styleName", val);
        },
    },
};
</script>

<style scoped>
.style-items {
    margin: 10px 0 10px 0;
    padding: 0;
    list-style: none;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    flex-wrap: wrap;
    user-select: none;
}

.style-items .style-item {
    width: 180px;
    box-shadow: 0 2px 17px 3px rgba(207, 221, 213, 0.35);
    border-radius: 3px;
    border: 1px solid #f1f1f1;
    margin-right: 30px;
    margin-bottom: 30px;
    cursor: pointer;
}

.style-items .style-item:hover {
    box-shadow: 0 2px 17px 3px rgba(207, 221, 213, 0.6);
}

.style-items .style-item.active {
    border: 1px solid #1989fa;
    box-shadow: none;
}
</style>
